<template>
  <!-- 一个template里只能有一个主div -->
  <div>
    <div class="test-box">
      <h3>这是用户自定义的Test.vue</h3>
      <p>插值表达式：{{ username }}</p>
      <button @click="changeName">修改用户名</button>
    </div>
    <hr />
    <div>123</div>
  </div>
</template>

<script>
// 默认导出
export default {
  // data数据源
  // .vue里的data不能像之前一样指向对象，要变成函数
  data() {
    // return出去的数据中可以定义数据
    return {
      username: "asd",
    };
  },

  // methods事件
  methods: {
    changeName() {
      // this表示当前组件的实例对象
      this.username = "修改了";
      console.log(this.username);
    },
  },
  // 监听器
  watch: {},
  // 计算属性
  computed: {},
  // 过滤器
  filters: {},
};
</script>


<!-- less -->
<style lang="less">
.test-box {
  background-color: aqua;
  h3 {
    color: red;
  }
}
</style>